<template>
	<div>
		<div id="cesiumContainer">
      <div id="tool">
        <!-- <div id="polyLine">画线</div> -->
      </div>
    </div>
	</div>
</template>

<script>
export default {
  data () {
	return {
	}
  },
  mounted () {
	var viewer = new Cesium.Viewer('cesiumContainer');
	viewer.cesiumWidget.creditContainer.style.display = 'none';
	// 分辨率调整函数 
    let adjustmentPixel = function () {
    // 判断是否支持图像渲染像素化处理
      var supportsImageRenderingPixelated = viewer.cesiumWidget.supportsImageRenderingPixelated;
      if (supportsImageRenderingPixelated) {
        // 直接拿到设备的像素比例因子 - 如我设置的1.25
        var vtxf_dpr = window.devicePixelRatio;//返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。 此值也可以解释为像素大小的比率：一个CSS像素的大小与一个物理像素的大小。 
        //简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个CSS像素。
        // 这个while我们在后面会做一个说明，但不是解决问题的说明
        while (vtxf_dpr >= 2.0){ 
            vtxf_dpr /= 2.0; // 值1表示经典96 DPI（在某些平台上为76 DPI）显示，而对于HiDPI / Retina显示屏则期望值为2。
        }
        // 设置渲染分辨率的比例因子
        viewer.resolutionScale = vtxf_dpr;//渲染分辨率的缩放比例。
        //小于1.0的值可以改善性能不佳的设备上的性能，
        //而值大于1.0的设备将以更高的速度呈现分辨率，然后缩小比例，从而提高视觉保真度。
        //例如，如果窗口小部件的尺寸为640x480，则将此值设置为0.5将导致场景以320x240渲染，
        //然后在设置时按比例放大设置为2.0会导致场景以1280x960渲染，然后按比例缩小。 
      }
    };
    adjustmentPixel();

    viewer.scene.postProcessStages.fxaa.enabled = false;//cesium的label的清晰度
    //viewer.scene.globe.depthTestAgainstTerrain = true;
    viewer.scene.fxaa=false;//改善实体的文字和图片清晰度(最新的cesium已经将fxaa移到PostProcessStageCollection)
     viewer.cesiumWidget.creditContainer.style.display = "none";
     viewer.camera.setView({
       destination:Cesium.Cartesian3.fromDegrees(116.46,39.92,10000000.0),
     }); // 设置初始位置
    let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    let PolylineArr = [], params = {positions:[]},lastPoint,nextPoint;
   
    handler.setInputAction(function(event) {
      let earthPosition  = viewer.camera.pickEllipsoid(event.position,viewer.scene.globe.ellipsoid);
      if (Cesium.defined(earthPosition)) {
        let ellipsoid = viewer.scene.globe.ellipsoid;
        let cartographic = ellipsoid.cartesianToCartographic(earthPosition);
        let lon = Cesium.Math.toDegrees(cartographic.longitude);
        let lat = Cesium.Math.toDegrees(cartographic.latitude);
        addPoint({lon:lon,lat:lat,color:Cesium.Color.RED});
        console.log('1' + lastPoint)
        console.log('2' + nextPoint)
        if(lastPoint === undefined){
          lastPoint = new Cesium.Cartesian3.fromDegrees(lon,lat);
        }else{
          nextPoint = new Cesium.Cartesian3.fromDegrees(lon,lat);
          addPolyline({positions:[lastPoint,nextPoint]});
          lastPoint = nextPoint; 
        }
        console.log('3' + lastPoint)
        console.log('4' + nextPoint)
      }
      console.log('5' + lastPoint)
      console.log('6' + nextPoint)
	}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  handler.setInputAction(function (movement) {
                handler.destroy();
    
                // callback(params.positions);
            }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
	//已知两点，画一条线
	let addPolyline = function (params) {
      if(params.positions.length === 0){
        alert('请提供边点!');
        return;
      }
      let entity = new Cesium.Entity({
        id: params.id || `${new Date().getTime()}线`,
        name:'线',
        show:true,
        polyline:new Cesium.PolylineGraphics ({
          show:true,
          positions:params.positions,
          width:params.width || 3,
          material: params.material || Cesium.Color.YELLOW
        })
      });
      viewer.entities.add(entity);
      return entity;
	};
	//加点
    let addPoint = function (params) {
      if(params.lon === undefined || params.lat === undefined){
        alert('请提供经纬度!');
        return;
      }
      let entity = new Cesium.Entity({
        id: params.id || `${params.lon}点`,
        name:params.name || '点',
        show:true,
        position:Cesium.Cartesian3.fromDegrees(params.lon, params.lat),
        point:new Cesium.PointGraphics ( {
          show : true,
          pixelSize : params.pixelSize || 5,
          heightReference : params.pixelSize || Cesium.HeightReference.CLAMP_TO_GROUND,
          color : params.color || new Cesium.Color ( 255 , 255 , 255 , 1 ),
          outlineColor : params.color || new Cesium.Color ( 0 , 0 , 0 , 0 ),
          outlineWidth : params.outlineWidth || 0,
          scaleByDistance : params.scaleByDistance || new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),
          translucencyByDistance : params.translucencyByDistance || new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),
          distanceDisplayCondition : params.translucencyByDistance || new Cesium.DistanceDisplayCondition(0, 4.8e10),
        })
      });
      viewer.entities.add(entity);
      return entity;
	};	
  }
}
</script>

<style scoped>

</style>